<template>
  <div class="container">
    <!-- 自定义logo头部  -->
    <index-title></index-title>
    <!-- 搜索栏 -->
    <Search></Search>
    <!-- 图片轮播 -->
    <index-swiper
      v-show='swiperImgs.length>0'
      :swiperImgs="swiperImgs"
    ></index-swiper>
    <!-- 一级分类开始 -->
    <ul class="wines">
      <li><a
          hover-class="none"
          href="/pages/wines/main?title=红葡萄酒&parent_id=10"
        ><img
            src="../../images/wine_1.png"
            mode="aspectFit"
          ></a></li>
      <li><a
          hover-class="none"
          href="/pages/wines/main?title=白葡萄酒&parent_id=75"
        ><img
            src="../../images/wine_2.png"
            mode="aspectFit"
          ></a></li>
      <li><a
          hover-class="none"
          href="/pages/wines/main?title=气泡酒&parent_id=76"
        ><img
            src="../../images/wine_3.png"
            mode="aspectFit"
          ></a></li>
      <li><a
          hover-class="none"
          href="/pages/wines/main?title=热卖&parent_id=77"
        ><img
            src="../../images/wine_4.png"
            mode="aspectFit"
          ></a></li>
    </ul>
    <!-- 一级分类结束 -->
    <div class="slice"></div>
    <!-- 二级分类开始 -->
    <Category
      v-for="(category, index) in categorys"
      :key=index
      :category="category"
    ></Category>
    <!-- 二级分类结束 -->
    <div
      class="slice"
      style="margin:-12rpx 0 0 0;"
    ></div>
    <!-- 精品推荐开始 -->
    <div class="header">
      <img
        src="../../images/endTitle.png"
        mode="aspectFit"
      >
    </div>
    <ul class="list">
      <li
        v-for="(item, index) in products"
        :key=index
      >
        <a
          hover-class="none"
          :href="'/pages/detail/main?id='+item.id"
        >
          <div class="content">
            <img
              class="img"
              :src="item.image"
              mode="aspectFit"
            >
            <div class="title">{{item.product_name}}</div>
            <div class="buy">
              <!-- <span class="icon">￥</span> -->
              <!-- <span class="price">{{item.label}}</span> -->
              {{item.label?item.label:''}}
              <span class="oldPrice">原价{{item.original_price}}</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
    <!-- 精品推荐结束 -->
    <bottom-btn />
  </div>
</template>

<script>
import IndexTitle from "@/components/IndexTitle";
import IndexSwiper from "@/components/IndexSwiper";
import Search from "@/components/Search";
import Category from "@/components/Category";
import WinesList from "@/components/WinesList";
import BottomBtn from "@/components/BottomBtn";
import { request } from "@/utils";
export default {
  components: {
    IndexTitle,
    Search,
    IndexSwiper,
    Category,
    WinesList,
    BottomBtn
  },
  data() {
    return {
      swiperImgs: [],
      categorys: [],
      cateId: undefined,
      page: 1,
      hasMore: true,
      products: []
    };
  },
  methods: {
    // 加载轮播图
    async getSwiper() {
      var res = await request("/v1/swiper", "get", {}, null);
      this.swiperImgs = res.data.items;
    },
    // 加载分类和产品
    async getCategory() {
      var res = await request("/v1/category", "get", { is_show: 1 }, null);
      this.categorys = res.data.items;
      res = await request(
        "/v1/category/get-product-area",
        "get",
        {
          is_show: 1
        },
        null
      );
      if (res.data) {
        var items = res.data.items;
        for (var each in items) {
          if (items[each].title === "精选推荐") {
            var product_id = items[each].product_ids; // 精选推荐
          }
        }
        res = await request(
          "/v1/product/search",
          "get",
          { product_id },
          "hideLoadinig"
        );
        this.products = res.data.items; // 精选推荐
      }
    }
  },
  mounted() {
    this.getSwiper();
    this.getCategory();
  },
  onShareAppMessage(res) {
    return {
      title: "Y-store",
      path: "/pages/buffer/main",
      imageUrl: "../../images/swiper_1.png"
    };
  }
};
</script>

<style scoped lang="scss">
.container {
  .wines {
    display: flex;
    justify-content: space-between;
    margin: 0 25rpx 25rpx;
    img {
      width: 150rpx;
      height: 162rpx;
    }
  }
  .header {
    width: 710rpx;
    margin: 0 25rpx;
    img {
      height: 113rpx;
    }
  }
  .list {
    display: flex;
    margin: 0 25rpx;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      .content {
        width: 330rpx;
        // height: 450rpx;
        display: flex;
        flex-direction: column;
        // font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        justify-content: flex-start;
        margin-bottom: 20px;
        .img {
          width: 330rpx;
          height: 320rpx;
        }
        .title {
          font-size: 14px;
          margin-top: 15rpx;
          width: 330rpx;
          line-height: 20px;
          color: #343434;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-weight: bold;
        }
        .buy {
          white-space: nowrap;
          color: #b93a39;
          margin-top: 10px;
          // border: 1rpx solid #000;
          font-weight: bold;
          font-size: 16px;
          line-height: 15px;
          overflow: hidden;
          width: 330rpx;
          text-overflow: ellipsis;
          .icon {
            font-size: 12px;
            font-weight: bold;
          }
          .oldPrice {
            text-decoration: line-through;
            font-size: 10px;
            color: #6d6d6d;
            display: inline-block;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
